<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="actionHeader">
        <!-- <el-input v-model.trim="listQuery.staffName" clearable placeholder="输入用户名" style="width: 350px;" class="filter-item" @keyup.enter.native="handleFilter" />
        <el-button class="filter-item" type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button> -->
        <div class="grid-content bg-purple">
          <span>用户查询:</span>
          <el-select v-model="listQuery.userId" clearable placeholder="请选择用户">
            <el-option
              v-for="item in optionsUser"
              :key="item.userId"
              :label="item.realName"
              :value="item.userId"
            />
          </el-select>
        </div>
        <div class="grid-content bg-purple">
          <span>客户查询:</span>
          <el-select v-model="listQuery.staffId" clearable placeholder="请选择用户">
            <el-option
              v-for="item in options"
              :key="item.staffId"
              :label="item.staffName"
              :value="item.staffId"
            />
          </el-select>
        </div>
        <el-button class="filter-item" type="primary" style="margin-left: 10px;" icon="el-icon-search" @click="handleFilter">
          搜索
        </el-button>
        <el-button class="filter-item" type="danger" style="margin-left: 10px;" icon="el-icon-document" @click="outHandle">
          出库
        </el-button>
      </div>
    </div>
    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      :default-sort="{prop: 'stockOutTime', order: 'descending'}"
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="序号" type="index" align="center" width="80">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo-1)*listQuery.pageSize+scope.$index+1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出库id" prop="stockOutId" align="center">
        <template slot-scope="{row}">
          <span>{{ row.stockOutId }}</span>
        </template>
      </el-table-column>
      <el-table-column label="出库时间" prop="stockOutTime" sortable width="200" align="center">
        <template slot-scope="{row}">
          <span>{{ row.stockOutTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="代理账户" class-name="status-col" width="200" align="center">
        <template slot-scope="{row}">
          {{ row.staffName }}
        </template>
      </el-table-column>
      <el-table-column label="出库数量" class-name="status-col" align="center">
        <template slot-scope="{row}">
          {{ row.stockOutAmount }}
        </template>
      </el-table-column>
      <el-table-column label="卡来源" prop="stockOutId" align="center">
        <template slot-scope="{row}">
          <span>{{ row.cardSource }}</span>
        </template>
      </el-table-column>

      <el-table-column label="添加备注" prop="remark" align="center" width="280" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <div class="remarkBox">
            <el-input
              v-if="!scope.row.is_edit"
              v-model.lazy="scope.row.remark"
              size="small"
              placeholder="请输入备注信息"
              style="width:200px"
              @keyup.enter.native="inputRemark(scope.row)"
            />
            <a v-else href="javascript:;" class="inputStyle" :title="scope.row.remark"><el-tag size="small" type="danger">{{ scope.row.remark }}</el-tag></a>
            <div v-if="is_edit" style="margin-left: 15px;">
              <!-- 编辑 -->
              <el-button
                v-if="scope.row.is_edit"
                size="mini"
                type="danger"
                icon="el-icon-edit"
                @click="handleEdit(scope.$index, scope.row)"
              >修改备注</el-button>
              <!-- 保存 -->
              <el-button
                v-if="!scope.row.is_edit"
                size="mini"
                type="success"
                icon="el-icon-plus"
                @click="handleSave(scope.$index, scope.row)"
              >保存备注</el-button>
            </div>
          </div>

        </template>
      </el-table-column>
      <el-table-column label="操作人" class-name="status-col" align="center">
        <template slot-scope="{row}">
          {{ row.createUserName }}
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-table-column label="出库状态" class-name="status-col" width="300" align="center">
        <template slot-scope="{row}">

          <el-tag :type="row.putstatus==0?'success':'danger'">
            {{ row.putstatus==0?"已出库":"未出库" }}
          </el-tag>
        </template>
      </el-table-column> -->
    <!-- <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            详情
          </el-button>
        </template>
      </el-table-column> -->
    <!-- 出库 -->
    <el-dialog title="出库" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" label-position="left" label-width="70px" style="width: 400px; margin-left:50px;">
        <el-form-item label="代理商" prop="username">
          <el-select v-model="qujianQuery.staffId" clearable placeholder="请选择客户">
            <el-option
              v-for="item in options"
              :key="item.staffId"
              :label="item.staffName"
              :value="item.staffId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="请选择" prop="selectBox">
          <el-radio-group v-model="qujianQuery.iccidOrUserCode">
            <el-radio :label="0">ICCID</el-radio>
            <el-radio :label="1">用户码</el-radio>
          </el-radio-group>
          <div class="flexContent">
            <div class="inputBox">
              <div v-if="qujianQuery.iccidOrUserCode==0" class="inputIccid">
                <el-input v-model.trim="qujianQuery.startIccid" placeholder="请输入iccid" /> - <el-input v-model.trim="qujianQuery.endIccid" placeholder="请输入iccid" />
                <el-button class="filter-item" type="danger" style="margin-left: 10px;" icon="el-icon-document" @click="getQujianCardNum(0)">
                  搜索
                </el-button>
              </div>
              <div v-if="qujianQuery.iccidOrUserCode==1" class="inputIccid">
                <el-input v-model.trim="qujianQuery.startUserCode" placeholder="请输入用户码" /> - <el-input v-model.trim="qujianQuery.endUserCode" placeholder="请输入用户码" />
                <el-button class="filter-item" type="danger" style="margin-left: 10px;" icon="el-icon-document" @click="getQujianCardNum(1)">
                  搜索
                </el-button>
              </div>
            </div>
          </div>
          <div v-if="qujianQuery.iccidOrUserCode==0">根据iccid区间查询片数数量为：{{ cardNums }}&nbsp;张</div>
          <div v-else>根据用户码区间查询片数数量为：{{ cardNums }}&nbsp;张</div>
        </el-form-item>
        <!-- <el-form-item label="上传文件" prop="fileExcel">
          <el-upload
            ref="upload"
            class="uploadExcel"
            action=""
            accept=".xlsx"
            :limit="limitNum"
            :auto-upload="false"
            :on-change="uploadChange"
            :show-file-list="false"
          >
            <el-button type="primary" icon="el-icon-document">卡数据上传</el-button>
          </el-upload>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="comfrimBtn">
          确定
        </el-button>
      </div>
    </el-dialog>

    <!-- 页码 -->
    <div class="pageGation">
      <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNo" :limit.sync="listQuery.pageSize" @pagination="getOutList" />
    </div>
  </div>
</template>

<script>
// import parseTime from '@/utils/index'
// import UploadExcelComponent from '@/components/UploadExcel/index.vue'
import Pagination from '@/components/Pagination'
import { getoutStorageList, getCustomerSelect, outStorage, getUserId, getQujianValue, editOutRemark } from '@/api/outStorage'
import { debounce } from '@/utils'
export default {
  components: {
    Pagination
  },
  data() {
    return {
      dialogFormVisible: false,
      is_edit: true,
      titleName: '出库',
      tableData: [],
      currentRow: null,
      listQuery: {
        staffId: '',
        userId: '',
        pageNo: 1,
        pageSize: 20
      },
      total: 0,
      listLoading: false,
      tableKey: 0,
      value: '',
      fileList: [],
      limitNum: 1,
      options: [],
      staffId: '',
      file: null,
      formdatas: null,
      optionsUser: '',
      iccidQuery: {
        iccidFont: '',
        iccidEnd: ''
      },
      usercode: '',
      qujianQuery: {
        staffId: '',
        iccidOrUserCode: 0, // 0 iccid  1：userCode
        startIccid: '',
        endIccid: '',
        startUserCode: '',
        endUserCode: ''
      },
      cardNums: 0
    }
  },
  watch: {
    'qujianQuery.iccidOrUserCode': {
      handler(val, oldval) {
        console.log(val, oldval)
        if (val === 1) {
          this.qujianQuery.startUserCode = ''
          this.qujianQuery.endUserCode = ''
        } else {
          this.qujianQuery.startIccid = ''
          this.qujianQuery.endIccid = ''
        }
      }
    }
  },
  created() {
    this.getCustomeOption()
    this.getOutList()
    this.getUserIdSelect()
  },
  methods: {
    // 修改备注
    handleEdit(index, row) {
      console.log(index, row)
      if (row.remark) {
        row.is_edit = false
      }
    },
    inputRemark(item) {
      debounce(this.saveRemark(item), 600)
    },
    // 保存数据
    handleSave(index, row) {
      debounce(this.saveRemark(row), 500)
    },
    //
    saveRemark(row) {
      editOutRemark({
        stockOutId: row.stockOutId,
        remark: row.remark
      }).then(res => {
        if (res.code === '00000') {
          row.is_edit = true
          this.$message.success(`${res.message}`)
          setTimeout(() => {
            this.getOutList()
          }, 200)
        }
      })
    },
    // 根据区间获取卡片数量
    getQujianCardNum(type) {
      if (type === 0) {
        this.qujianQuery.startUserCode = ''
        this.qujianQuery.endUserCode = ''
        this.serarchQuery()
      } else {
        this.qujianQuery.startIccid = ''
        this.qujianQuery.endIccid = ''
        this.serarchQuery()
      }
    },
    serarchQuery() {
      getQujianValue(this.qujianQuery).then(res => {
        if (res.code === '00000') {
          console.log(this.qujianQuery)
          this.cardNums = res.data
        }
      })
    },
    // 列表
    getOutList() {
      this.listLoading = true
      getoutStorageList(this.listQuery).then(res => {
        if (res.code === '00000') {
          this.listLoading = false
          this.total = res.data.totalRows
          this.tableData = res.data.rows.map(item => {
            return {
              cardSource: item.cardSource,
              createUserName: item.createUserName,
              staffName: item.staffName,
              remark: item.remark,
              stockOutAmount: item.stockOutAmount,
              stockOutId: item.stockOutId,
              stockOutTime: item.stockOutTime,
              is_edit: !!item.remark
            }
          })
        }
      })
    },

    // 搜索
    handleFilter() {
      this.listLoading = true
      setTimeout(() => {
        this.listLoading = false
        this.getOutList()
      })
    },
    // 获取用户下拉id
    async getUserIdSelect() {
      await getUserId().then(res => {
        if (res.code === '00000') {
          this.optionsUser = res.data
        }
      })
    },
    // 出库
    outHandle() {
      this.dialogFormVisible = true
    },
    getCustomeOption() {
      getCustomerSelect().then(res => {
        if (res.code === '00000') {
          this.options = res.data
        }
      })
    },
    uploadChange(item) {
      console.log(item)
      const formData = new FormData()
      this.file = item.raw
      formData.append('file', this.file)
      formData.append('staffId', this.staffId)
      this.formdatas = formData
    },
    // 导入卡数据
    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: '请勿上传超过1m的文件',
        type: 'warning'
      })
      return false
    },
    handleSuccess({ results, header }) {
      console.log(results, header)
    },
    // 确定
    comfrimBtn() {
      if (this.qujianQuery.staffId) {
        outStorage(this.qujianQuery).then(res => {
          if (res.code === '00000') {
            this.$message.success(`${res.message}`)
            this.qujianQuery.staffId = ''
            this.dialogFormVisible = false
            setTimeout(() => {
              this.getOutList()
            }, 500)
          } else {
            this.$message.error('请求失败')
            this.dialogFormVisible = false
          }
        }).catch(err => {
          console.log(err)
        })
      } else {
        this.$message.error('值不能为空')
      }
    }
    // radioChange(value) {
    //   if (value === 1) {
    //     this.qujianQuery.startUserCode = ''
    //     this.qujianQuery.endUserCode = ''
    //   } else {
    //     this.qujianQuery.startIccid = ''
    //     this.qujianQuery.endIccid = ''
    //   }
    // }
  }
}
</script>
<style lang="scss" scoped>
    .filter-item{
      margin-bottom: 0;
    }
    .inputStyle{
        width:170px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .actionHeader{
      display: flex;
      align-items: center;
        .grid-content{
          display: flex;
          justify-content:center;
          align-items: center;
          margin-left:15px;
          >span{
            display: block;
            margin: 4px;
            width:70px;
          }
       }
    }
.remarkBox{
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  padding-left: 25px;
  >a{
    display: inline-block;
    text-align: left;
    color: #f00;
  }
}
.el-table{
  position: relative;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    max-width: 100%;
    background-color: #fff;
    font-size: 14px;
    color: #606266;
}
.small-padding .cell {
    padding-left: 5px;
    padding-right: 5px;
}
.el-table .cell {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-all;
    line-height: 23px;
    padding-left: 10px;
    padding-right: 10px;
}
.el-button--mini{
        padding: 6px 7px;
        min-width: 60px;
 }
 .actionHeader{
  display: flex;
}
.pageGation{
  display: flex;
  justify-content: flex-end;
  margin: 15px 40px 0;
  font-size: 23px;
}
.flexContent{
  display: flex;
  flex: 1;
  .inputIccid{
    display: flex;
    .el-input{
      width: 200px;
      margin: 0 10px;
    }
  }

}

</style>
